<template>
  <div class="v-common-attr">
    <px-collapse v-model="activeName">
      <px-collapse-item title="通用样式" name="style">
        <px-form v-if="curComponent">
          <px-form-item v-for="({ key, label }, index) in styleKeys" :key="index" :label="label">
            <px-color-picker v-if="isIncludesColor(key)" v-model="curComponent.style[key]" show-alpha />
            <px-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
              <px-option v-for="item in optionMap[key]" :key="item.value" :label="item.label" :value="item.value" />
            </px-select>
            <px-input v-else v-model.number="curComponent.style[key]" type="number" />
          </px-form-item>
        </px-form>
      </px-collapse-item>
      <px-collapse-item title="通用参数" name="params">
        <px-form v-if="curComponent">
          <px-form-item v-for="({ key, label }, index) in paramsData" :key="index" :label="label">
            <px-input
              v-if="
                //@ts-ignores

                curComponent.propValue.hasOwnProperty(key)
              "
              v-model="
                //@ts-ignores

                curComponent.propValue[key]
              "
            />
          </px-form-item>
          <px-form-item v-for="({ key, label }, index) in commonMap" :key="index" :label="label">
            <px-radio-group
              v-if="key == 'onlyScalePos'"
              v-model="
                //@ts-ignores
                curComponent[key]
              "
              class="ml-4"
            >
              <px-radio :label="true" size="large">true</px-radio>
              <px-radio :label="false" size="large">false</px-radio>
            </px-radio-group>
            <px-input
              v-else
              v-model="
                //@ts-ignores
                curComponent[key]
              "
            />
          </px-form-item>
          <template v-for="({ key, label }, index) in commonSelectKey" :key="index">
            <px-form-item v-if="curComponent.propValue[key]" :label="label">
              <px-select v-model="curComponent.propValue[key]">
                <px-option v-for="item in commonOptionMap[key]" :key="item.value" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
            <px-form-item v-else-if="curComponent[key]" :label="label">
              <px-select v-model="curComponent[key]">
                <px-option v-for="item in commonOptionMap[key]" :key="item.value" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
          </template>
          <template v-if="curComponent['classConfig']">
            <px-form-item label="课室选择">
              <px-select v-model="curComponent['classConfig'].className" @change="classConfigChange">
                <px-option v-for="item in commonOptionMap['className']" :key="item.value" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
            <px-form-item label="是否开启课室点击跳转">
              <px-radio-group
                v-model="
                  //@ts-ignores
                  curComponent['classConfig'].isClassJump
                "
                class="ml-4"
              >
                <px-radio :label="true" size="large">true</px-radio>
                <px-radio :label="false" size="large">false</px-radio>
              </px-radio-group>
            </px-form-item>
            <px-form-item v-if="curComponent['classConfig'].isClassJump" label="课室跳转地址">
              <px-input
                v-model="
                  //@ts-ignores
                  curComponent['classConfig'].routerPath
                "
              />
            </px-form-item>
          </template>
        </px-form>
      </px-collapse-item>
    </px-collapse>
  </div>
</template>

<script setup lang="ts">
import { useComponent } from "@visual/stores";
import { styleData, selectKey, optionMap, paramsData, commonMap, commonSelectKey, commonOptionMap, classNamePathMap } from "@visual/utils";
import { storeToRefs } from "pinia";
import { ref, computed, onBeforeMount, watch, inject } from "vue";
import { cloneDeep } from "@pureadmin/utils";

const activeName = ref(["style", "params"]);
const componentStore = useComponent();
const { setCurComponentData } = componentStore;
const { curComponent } = storeToRefs(componentStore);
import componentList from "@visual/custom-component/component-list";

// onBeforeMount(() => {});
// watch(
//   curComponent,
//   (newVal, oldVal) => {
//     if (newVal) {
//       if (!oldVal || oldVal.id !== newVal.id) {
//         let compConfig = componentList.find(item => item.component === curComponent.value.component);
//         if (compConfig) {
//           compConfig = cloneDeep(compConfig);

//           setCurComponentData(compConfig);
//         }
//       }
//     }
//   },
//   { deep: true }
// );
const styleKeys = computed(() => {
  if (!curComponent.value) return [];
  const curComponentStyleKeys = Object.keys(curComponent.value.style);
  return styleData.filter(item => curComponentStyleKeys.includes(item.key));
});

function isIncludesColor(str) {
  return str.toLowerCase().includes("color");
}
function mergeObjects(obj1, obj2) {
  function isObject(item) {
    return item && typeof item === "object" && !Array.isArray(item);
  }

  function mergeDeep(target, source) {
    if (isObject(target) && isObject(source)) {
      for (const key in source) {
        if (isObject(source[key])) {
          if (!target[key]) Object.assign(target, { [key]: {} });
          mergeDeep(target[key], source[key]);
        } else {
          Object.assign(target, { [key]: source[key] });
        }
      }
    }
  }

  const result = { ...obj1 };
  mergeDeep(result, obj2);
  return result;
}
function classConfigChange(val) {
  curComponent.value["classConfig"].routerPath = classNamePathMap[val];
}
</script>

<style lang="scss">
.v-common-attr {
  margin-bottom: 18px;
  // height: 600px;
  // overflow: auto;
}
</style>
